<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>KOL详情</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
            </div>
            <el-descriptions title="" direction="vertical" :column="10" border size="small">
                <el-descriptions-item label="平台">
                    {{ kolDetail.platform }}
                </el-descriptions-item>
                <el-descriptions-item label="昵称">
                    {{ kolDetail.mobileNo }}
                </el-descriptions-item>
                <el-descriptions-item label="称呼">
                    {{ kolDetail.nickName }}
                </el-descriptions-item>
                <el-descriptions-item label="个性签名">
                    {{ kolDetail.userSign }}
                </el-descriptions-item>
                <el-descriptions-item label="头像">
                    <el-image v-if="kolDetail.avatar"
                              style="width: 40px; height: 40px"
                              :src="kolDetail.avatar"
                              fit="fill">
                    </el-image>
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                    {{ kolDetail.gender }}
                </el-descriptions-item>
                <el-descriptions-item label="星座">
                    {{ kolDetail.constellation }}
                </el-descriptions-item>
                <el-descriptions-item label="城市">
                    {{ kolDetail.city }}
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                    {{ kolDetail.age }}
                </el-descriptions-item>
                <el-descriptions-item label="粉丝数量">
                    {{ kolDetail.fansCount }}
                </el-descriptions-item>
                <el-descriptions-item label="关注数量">
                    {{ kolDetail.followCount }}
                </el-descriptions-item>
                <el-descriptions-item label="阅读数量">
                    {{ kolDetail.readCount }}
                </el-descriptions-item>
                <el-descriptions-item label="获赞数量">
                    {{ kolDetail.flowerCount }}
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">
                    {{ kolDetail.createTime }}
                </el-descriptions-item>
                <el-descriptions-item label="更新时间">
                    {{ kolDetail.updateTime }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
    </div>
</template>

<script>
import {getKolById} from '@/api/api'

export default {
    name: "kolDetail",
    data() {
        return {
            // KOL详情
            kolDetail: {},
            // 唯一ID
            id: '',
        }
    },
    methods: {
        getData() {
            getKolById({"id": this.id}).then(data => {
                this.kolDetail = data.body;
            })
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
